<template>
  <div class='preview-wrapper'>
    <div class='header'>
      <span class='title'>lung function and chronic obstructive pulmonary disease identify new loci and potential druggable targets.pdf</span>
      <div class='operation'>
        <a class='download' href='#' @click.prevent='handleDownload'><span class='el-icon-download'></span>  下载</a>
        <a class='reject' href='#' @click.prevent='handleReject'><span class='el-icon-star-on'></span>  退回</a>
      </div>
      <div class='back pull-left' @click='back'><i class='el-icon-arrow-left'></i> 返回</div>
    </div>
    <pageContent>
      <div class='info-wrap'>
        <ul>
          <li
            v-for='(item, index) in fields'
            v-if='item.value'
            :key='index'>
            <label>{{item.text}}:</label>
            <p>{{item.value}}</p>
          </li>
        </ul>
      </div>
      <div
        class="pic-wrap custom-scrollbar"
        :class="{'hover': scrollbarVisible}"
        @scroll="paperScroll">
        <div data-v-32b7854e="" class="page"><div data-v-32b7854e="" class="content"><img data-v-32b7854e="" src="http://img.okay.do/42de7a020429a908ab90d86686eb1a15_W1782_H2349_G0@1070W" alt="" class="wild"></div></div>
        <!-- 有附件 -->
  <!--       <div class='page' v-for='(item, index) in imgList' :key='index'>
          <div class='content'>
            <img :src='item.url' alt='' :class='{wild: item.wild}'>
          </div>
        </div> -->
        <!-- 无附件 -->
  <!--       <div v-if='achievement.files_count == 0' class='text-img-wrap'>
          <ul>
            <li
              v-for='(item, index) in fields'
              v-if='item.value'
              :key='index'>
              <label>{{item.text}}:</label>
              <p>{{item.value}}</p>
            </li>
          </ul>
        </div> -->
      </div>
    </pageContent>
    <reject-dialog
      ref='rejectDialog'
      :id='id'
      :staff-id='author.id'
      @confirm='rejectCallback' />
  </div>
</template>
<script>
import RejectDialog from './rejectDialog';

import scrollbar from 'mixins/scrollbar';
import back from 'mixins/back';

export default {
  mixins: [scrollbar, back],
  data() {
    return {
      scrollbarVisible: true,
      achievement: {},
      imgList: [],
      author: {},
      fields: [
        {
          field: 'title',
          text: '论文名',
          value: 'lung function and chronic obstructive pulmonary disease identify new loci and potential druggable targets'
        },
        {
          field: 'jurnal',
          text: '刊物名称',
          value: '大叔大婶',
        }
      ],
      id: this.$route.params.id,
      pdf: {
        offsetTop: 10, // 图片旋转以后距离顶上上距离
        offsetBottm: 30, // 图片旋转以后距离顶上上距离
        offsetHorizontal: 10, // 装订预留
        width: 439, // 页面的宽度
        ratio: 0.7070707070707071, // a4纸张的比例
        column: 1, // 几栏布局
      },
    };
  },
  created() {
    this.fetchData(this.$route.params.id);
  },
  computed: {
    containerRatio() {
      return (this.pdf.width - (this.pdf.offsetHorizontal * 2)) / ((this.pdf.width / this.pdf.ratio) - this.pdf.offsetTop - this.pdf.offsetBottm);
    },
  },
  methods: {
    fetchData(id) {
      // getAchievement({ achiv_id: id })
      //   .then(({data}) => {
      //     this.achievement = data.achievement;
      //     this.author = data.staff;
      //     this.fields = data.fields;
      //     data.imglist.forEach(item => {
      //       let url = item.url + '@1070W';
      //       let width = parseInt(item.width);
      //       let height = parseInt(item.height);
      //       let wild = false;
      //       if (width > height) {
      //         url = `${item.url}?x-oss-process=image/rotate,270`; // 如果宽大于高，则使用为url加旋转参数
      //         const temp = width; // 切换宽高属性
      //         width = height;
      //         height = temp;
      //       }
      //       if ((width / height) > this.containerRatio) {
      //         wild = true;
      //       }
      //       item.url = `${url}`;
      //       item.width = width;
      //       item.height = height;
      //       item.wild = wild;
      //     });
      //     this.imgList = data.imglist;
      //     this.$root.loading.visible = false;
      //   })
      //   .catch(err => console.log(err));
    },
    rejectCallback() {
      this.$router.back();
    },
    handleDownload() {
      // 该成果无附件时，不能下载
      if (this.achievement.files_count == 0) {
        this.$message.warning('此成果无附件，无法下载哦~');
        return;
      }
      this.$root.loading.visible = true;
      // downloadAchievement({ achiv_id: this.$route.params.id })
      //   .then(({data}) => {
      //     this.$root.loading.visible = false;
      //     location.href = data.download_url;
      //   })
      //   .catch(err => {
      //     console.log(err);
      //     this.$root.loading.visible = false;
      //     this.$message.error(err);
      //   });
    },
    handleReject() {
      this.$refs.rejectDialog.show();
    },
    backToList() {
      this.$router.back();
    }
  },
  components: {
    RejectDialog,
  }
}
</script>
<style scoped lang="scss">
.preview-wrapper {
  position: relative;
  background: #525659;
  padding-top: 60px;
  height: 100%;
  color: #fff;
}

.header{
  position: absolute;
  padding: 20px 40px 20px 40px;
  width: 100%;
  background-color: #475669;
  top: 0;
  z-index: 999;
  text-align: center;
  .back {
    cursor: pointer;
  }
  .operation {
    display: inline-block;
    float: right;
    a {
      padding: 15px;
      font-size: 14px;
      color: #fff;
      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
      }
      &:empty,
      & span {
        font-size: 16px;
      }
    }
  }
}

.pic-wrap {
  height: 100%;
  overflow: auto;
  .page, .text-img-wrap {
    width: 595px;
    height: 841.5px;
    margin: 40px auto;
    background: #fff;
  }
  .page{
    .content {
      position: relative;
      height: 100%;
      padding: 36px 24px 48px 24px;
      text-align: center;
      img {
        width: auto;
        height: 100%;
        &.wild {
          width: 100%;
          height: auto;
        }
      }
    }
  }
  .text-img-wrap {
    padding-top: 70px;
    label {
      display: inline-block;
      width: 146px;
      text-align: right;
      color: rgba(0, 0, 0, 0.45);
    }
    li {
      margin-bottom: 10px;
    }
    p {
      display: inline-block;
      color: rgba(0, 0, 0, 0.75);
      margin-left: 32px;
    }
  }
}

.info-wrap {
  position: absolute;
  top: 140px;
  max-width: 300px;
  max-height: 500px;
  overflow: auto;
  li {
    clear: both;
    margin-bottom: 12px;
    label {
      float: left;
      width: 7em;
      color: #bbb;
      text-align: right;
      margin-right: 1em;
    }
    p {
      color: #fff;
      overflow: hidden;
    }
  }
}
</style>
